<template>
  <el-form
    ref="ruleFormRef"
    :model="formInline"
    :rules="formRules"
    label-width="auto"
    label-position="top"
    v-loading="isLoading"
  >
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">

        <el-form-item v-if="projectUnityName"  :label="titles?.unityId" prop="unityId">
         <div >
						{{ isNullOrEmpty(projectUnityName) }}
					</div>
        </el-form-item>
        <el-form-item v-else  label="所属单位" prop="unityId">
					<div>
            {{ isNullOrEmpty(unityName) }}
					</div>
        </el-form-item>
      </re-col>

      <re-col :value="12" :xs="24" :sm="24">
       
        <el-form-item   label="授权项目" prop="projectIds">
          <el-select v-if="edit == false"  multiple clearable v-model="formInline.projectIds" :placeholder='prompt?.projectIds' style="width: 100%" >
						<el-option v-for="item in options" :key="item.id" :label="item.projectName" :value="item.id" />
					</el-select>

          <div v-else>{{ isNullOrEmpty( formInline.projectName ) }}</div>
        </el-form-item>
      </re-col>

      <re-col v-if="formInline.id == null" :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.userIds" prop="userIds">
          <unitUserListSelect
            v-model="formInline.userIds"
            clearable
            multiple
            :unityId="unityId"
            :placeholder="prompt.userIds"
            :style="{ width: '100%' }" @blur="formValidateField(ruleFormRef, 'userIds')"
          />
        </el-form-item>
      </re-col>
      <re-col v-if="formInline.id !== null" :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.userId" prop="userId">
          {{ isNullOrEmpty( formInline.unityName ) }}
          <!-- <getroleSelectes
            v-model="formInline.userId"
            clearable
            :placeholder="prompt.userId"
            :style="{ width: '100%' }"
            @blur="formValidateField(ruleFormRef, 'userId')"
          /> -->
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.projectRoleIds" prop="projectRoleIds">
          <getroleSelect
            v-model="formInline.projectRoleIds"
            clearable
            multiple
            :unityId="unityId"
            placeholder="请选择项目权限"
            :style="{ width: '100%' }"
            @blur="formValidateField(ruleFormRef, 'projectRoleIds')"
          />
         
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import unitUserListSelect from "@/components/select/unitUserListSelect/unitUserListSelect.vue"
import { ref, reactive } from "vue";
import getroleSelect from "@/components/select/getroleSelect/getroleSelect.vue";
import getroleSelectes from "@/components/select/getroleSelectes/getroleSelectes.vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from "./index";
import type { infoType } from "@/api/manage/projectManagementes/user-authorization/index";
import {getauthproject} from "@/api/manage/projectManagementes/user-authorization/index";
import { formValidateField } from '@/utils/functions'
type FormProps = {
  formInline: infoType;
  isLoading: boolean;
  unityName:string;
  projectName:string;
  unityId:string;
  edit: boolean;
  projectUnityName:string
};
const options = ref([])
const list = ref([])
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({}) as infoType,
  isLoading: false,
  unityName: "",
  projectName: "",
  unityId:null,
  edit: false,
  projectUnityName:''
});

console.log("propss",props);

const formRules = reactive(<FormRules>{
  projectRoleIds: [
    { required: true, message: "请选择项目权限", trigger: "blur" }
  ],
  roles: [{ required: true, message: prompt?.roles, trigger: "blur" }]
});
const ruleFormRef = ref();
onMounted(()=>{

})

function getRef() {
  return ruleFormRef.value;
}

watch(() => props.unityId, (newVal, oldVal) => {

	getauthproject({
			unityId:props.unityId
		}).then(res => {
			list.value = res.result.data
			options.value = list.value
		})

})

defineExpose({ getRef });
</script>
